<template>
  <div>
    <div class="states-type">
      <span class="type-title">项目地区:</span>
      <div class="btns" :class="{'display_':regionType}">
        <button
          type="button"
          class="btn btn-light rounded-pill btn-sm states-type-item"
          :class="{ isActive: regionChange == item.value }"
          v-for="(item,index) in regionoptions"
          :key="index"
          @click="regionItem(item,index)"
        >
          {{ item.label }}
        </button>
      </div>
      <div class="operation">
        <span class="pointer" v-if="regionType" @click="regionType=false">更多<i class="ri-arrow-down-s-line"></i></span>
        <span class="pointer" v-else @click="regionType=true">收起<i class="ri-arrow-up-s-line"></i></span>
      </div>
    </div>
    <div class="row col-md-12" style="margin-top:10px;">
      <div class="col-md-3">
        <div class="form-group row">
          <label class="col-md-4 padding-right col-form-label col-offset-1"
            >招聘岗位</label
          >
          <div class="col-md-8">
            <select class="form-control .col-md-offset-2">
              <option v-for="(item,index) in positions" :key="index">{{item.label}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group row">
          <label class="col-md-4 padding-right col-form-label col-offset-1"
            >公司行业</label
          >
          <div class="col-md-8">
            <select class="form-control .col-md-offset-2">
              <option v-for="(item,index) in industry" :key="index">{{item.label}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group row">
          <label class="col-md-4 padding-right col-form-label col-offset-1"
            >工作经验</label
          >
          <div class="col-md-8">
            <select class="form-control .col-md-offset-2">
              <option v-for="(item,index) in experience" :key="index">{{item.label}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group row">
          <label class="col-md-4 padding-right col-form-label col-offset-1"
            >学历要求</label
          >
          <div class="col-md-8">
            <select class="form-control .col-md-offset-2">
              <option v-for="(item,index) in education" :key="index">{{item.label}}</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="row col-md-12" style="margin-top:10px;">
      <div class="col-md-3">
        <div class="form-group row">
          <label class="col-md-4 padding-right col-form-label col-offset-1"
            >薪资要求</label
          >
          <div class="col-md-8">
            <select class="form-control .col-md-offset-2">
              <option v-for="(item,index) in salary" :key="index">{{item.label}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group row">
          <label class="col-md-4 padding-right col-form-label col-offset-1"
            >融资阶段</label
          >
          <div class="col-md-8">
            <select class="form-control .col-md-offset-2">
              <option v-for="(item,index) in financing" :key="index">{{item.label}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group row">
          <label class="col-md-4 padding-right col-form-label col-offset-1"
            >公司规模</label
          >
          <div class="col-md-8">
            <select class="form-control .col-md-offset-2">
              <option v-for="(item,index) in scale" :key="index">{{item.label}}</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <recruitTransaction />
  </div>
</template>
<script>
import recruitTransaction from "./recruitTransaction";
import {cityData} from "../../../util/options";
export default {
  components: {
    recruitTransaction,
  },
  data () {
    return {
      // 招聘岗位
      positions: [
        {
          label: '不限',
          value: '不限',
        },{
          label: '技术研发',
          value: '技术研发',
        },{
          label: '项目管理',
          value: '项目管理',
        },{
          label: '财务',
          value: '财务',
        },{
          label: '人事行政',
          value: '人事行政',
        },{
          label: '高级管理',
          value: '高级管理',
        },{
          label: '销售',
          value: '销售',
        },{
          label: '市场策划',
          value: '市场策划',
        },{
          label: '传媒',
          value: '传媒',
        },{
          label: '金融',
          value: '金融',
        },{
          label: '教育培训',
          value: '教育培训',
        },{
          label: '医疗健康',
          value: '医疗健康',
        },{
          label: '采购/贸易',
          value: '采购/贸易',
        },{
          label: '供应链/物流',
          value: '供应链/物流',
        },{
          label: '房地产/建筑',
          value: '房地产/建筑',
        },{
          label: '农/林/牧/渔',
          value: '农/林/牧/渔',
        },{
          label: '咨询/翻译/法律',
          value: '咨询/翻译/法律',
        },{
          label: '旅游',
          value: '旅游',
        },{
          label: '服务业',
          value: '服务业',
        },{
          label: '生产制造',
          value: '生产制造',
        },{
          label: '其他',
          value: '其他',
        }
      ],
      // 公司行业
      industry: [
        {
          label: '不限',
          value: '不限',
        },{
          label: '电子商务',
          value: '电子商务',
        },{
          label: '游戏',
          value: '游戏',
        },{
          label: '媒体',
          value: '媒体',
        },{
          label: '广告营销',
          value: '广告营销',
        },{
          label: '数据服务',
          value: '数据服务',
        },{
          label: '医疗健康',
          value: '医疗健康',
        },{
          label: '生活服务',
          value: '生活服务',
        },{
          label: '020',
          value: '020',
        },{
          label: '旅游',
          value: '旅游',
        },{
          label: '分类信息',
          value: '分类信息',
        },{
          label: '音乐/视频/阅读',
          value: '音乐/视频/阅读',
        },{
          label: '在线教育',
          value: '在线教育',
        },{
          label: '社交网络',
          value: '社交网络',
        },{
          label: '人力资源服务',
          value: '人力资源服务',
        },{
          label: '企业服务',
          value: '企业服务',
        },{
          label: '信息安全',
          value: '信息安全',
        },{
          label: '智能硬件',
          value: '智能硬件',
        },{
          label: '移动互联网',
          value: '移动互联网',
        },{
          label: '互联网',
          value: '互联网',
        },{
          label: '计算机软件',
          value: '计算机软件',
        },{
          label: '通信/网络设备',
          value: '通信/网络设备',
        },{
          label: '广告/公关/会展',
          value: '广告/公关/会展',
        },{
          label: '互联网金融',
          value: '互联网金融',
        },{
          label: '物流/仓储',
          value: '物流/仓储',
        },{
          label: '贸易/进出口',
          value: '贸易/进出口',
        },{
          label: '咨询',
          value: '咨询',
        },{
          label: '工程施工',
          value: '工程施工',
        },{
          label: '汽车生产',
          value: '汽车生产',
        },{
          label: '其他行业',
          value: '其他行业',
        }
      ],
      // 工作经验
      experience: [
        {
          label: '不限',
          value: '不限',
        },{
          label: '在校生',
          value: '在校生',
        },{
          label: '应届生',
          value: '应届生',
        },{
          label: '1年以内',
          value: '1年以内',
        },{
          label: '1-3年',
          value: '1-3年',
        },{
          label: '3-5年',
          value: '3-5年',
        },{
          label: '5-10年',
          value: '5-10年',
        },{
          label: '10年以上',
          value: '10年以上',
        }
      ],
      // 学历要求
      education: [
        {
          label: '不限',
          value: '不限',
        },{
          label: '初中及以下',
          value: '初中及以下',
        },{
          label: '中专/中技',
          value: '中专/中技',
        },{
          label: '高中',
          value: '高中',
        },{
          label: '大专',
          value: '大专',
        },{
          label: '本科',
          value: '本科',
        },{
          label: '硕士',
          value: '硕士',
        },{
          label: '博士',
          value: '博士',
        }
      ],
      // 薪资要求
      salary: [
        {
          label: '不限',
          value: '不限',
        },{
          label: '3K以下',
          value: '3K以下',
        },{
          label: '3-5K',
          value: '3-5K',
        },{
          label: '5-10K',
          value: '5-10K',
        },{
          label: '10-15K',
          value: '10-15K',
        },{
          label: '15-20K',
          value: '15-20K',
        },{
          label: '20-30K',
          value: '20-30K',
        },{
          label: '30-50K',
          value: '30-50K',
        },{
          label: '50K以上',
          value: '50K以上',
        }
      ],
      // 融资阶段
      financing: [
        {
          label: '不限',
          value: '不限',
        },{
          label: '未融资',
          value: '未融资',
        },{
          label: '天使轮',
          value: '天使轮',
        },{
          label: 'A轮',
          value: 'A轮',
        },{
          label: 'B轮',
          value: 'B轮',
        },{
          label: 'C轮',
          value: 'C轮',
        },{
          label: 'D轮及以上',
          value: 'D轮及以上',
        },{
          label: '已上市',
          value: '已上市',
        },{
          label: '不需要融资',
          value: '不需要融资',
        }
      ],
      // 公司规模
      scale: [
        {
          label: '不限',
          value: '不限',
        },{
          label: '0-20人',
          value: '0-20人',
        },{
          label: '20-99人',
          value: '20-99人',
        },{
          label: '100-499人',
          value: '100-499人',
        },{
          label: '500-999人',
          value: '500-999人',
        },{
          label: '1000-9999人',
          value: '1000-9999人',
        },{
          label: '10000人以上',
          value: '10000人以上',
        }
      ],
      regionoptions: cityData,
      regionType: true,
      regionChange: '全国',
    }
  },
  methods: {
    // 项目地区
    handleChangeregion(v){
      console.log(v);
    },
    regionItem(item,index){
      console.log(item,index);
      if(item.value!='全国'&&item.value!='全省'&&item.children){
        this.regionChange = item.children[0].value
        this.regionoptions = item.children
      }else{
        this.regionChange = item.value
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.all-products {
  font-size: 15px;
  font-weight: bold;
  margin-top: 20px;
}
.states-type {
  margin-top: 20px;
  display: flex;
  .type-title {
    display: inline-block;
    color: #74788d;
    margin-right: 10px;
    min-width: 65px;
    padding-top: 4px;
  }
  .states-type-item {
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 80px;
    &:hover {
      cursor: pointer;
    }
  }
}
.states-time {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  .time-title {
    display: inline-block;
    color: #74788d;
    margin-right: 10px;
    min-width: 65px;
    padding-top: 4px;
  }
  .states-time-item {
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.btns{
  width: 85%;
  overflow: hidden;
}
.display_{
  height: 38px;
}
.operation{
  width: 9%;
  text-align: right;
  padding-top: 2px;
  i{
    vertical-align: bottom;
  }
}
.padding-right {
  padding-right: 0;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.row {
  ::v-deep .el-input__inner {
    width: 100%;
    height: 1.7rem;
    padding: 0rem 0.75rem;
    line-height: 1.7rem;
  }
  ::v-deep .el-cascader,
  ::v-deep .el-input__icon,
  ::v-deep .el-range-separator {
    line-height: 1.7rem;
  }
  input,
  select {
    height: 1.7rem;
    padding: 0rem 0.75rem;
  }
}
.col-md-12,.col-md-8,.col-md-10{
  padding-left: 0;
}
</style>
